<template>
  <div class="cube-container">
    <div style="text-align:right;padding-bottom:15px;">
      <router-link to="/kylin/cube/mycube"><el-button type="success">我的Cube</el-button></router-link>
      <project-select v-model="params.projectId" @change="query"></project-select>
    </div>
    <el-row :gutter="32">
      <el-col :xs="24" :sm="24" :lg="12">
        <div class="chart-wrapper">
          <div class="chart-header">
            <span>Cube膨胀倍数占比</span>
            <el-button-group>
              <el-button :type="cubeType=='myCube'?'success':''" @click="cubeType='myCube'">我的</el-button>
              <el-button :type="cubeType=='allCube'?'success':''" @click="cubeType='allCube'">总体</el-button>
            </el-button-group>
            <span style="color:transparent!important">Cube膨胀倍数占比</span>
          </div>
          <annular-chart :chart-data="swellRangeStatistics[cubeType]" :title="cubeType=='myCube'?'我的':'总体'"></annular-chart>
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="12">
        <div class="chart-wrapper" style="min-height:383px;">
          <statistics-panel :data="statistics"></statistics-panel>
        </div>
      </el-col>
    </el-row>

    <el-row :gutter="32">
      <el-col :xs="24" :sm="24" :lg="12">
        <div class="chart-wrapper">
          <div class="chart-header">
            <span>维度使用率最低TOP10</span>
            <div>
              <i class="el-icon-sort-up" :class="isSortUp('top10LowestUsageColumn')?'active':''" @click="sortUp('top10LowestUsageColumn')"></i>
              <i class="el-icon-sort-down" :class="isSortUp('top10LowestUsageColumn')?'':'active'" @click="sortDown('top10LowestUsageColumn')"></i>
            </div>
          </div>
          <bar-chart :chart-data="top10LowestUsageColumn"></bar-chart>
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="12">
        <div class="chart-wrapper">
          <div class="chart-header">
            <span>膨胀倍数TOP10</span>
            <div>
              <i class="el-icon-sort-up" :class="isSortUp('top10SwellRatio')?'active':''" @click="sortUp('top10SwellRatio')"></i>
              <i class="el-icon-sort-down" :class="isSortUp('top10SwellRatio')?'':'active'" @click="sortDown('top10SwellRatio')"></i>
            </div>
          </div>
          <bar-chart :chart-data="top10SwellRatio"></bar-chart>
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="12">
        <div class="chart-wrapper">
          <div class="chart-header">
            <span>Cube热度TOP10</span>
            <div>
              <el-date-picker
                v-model="params.mostUsedQueryRangeDate"
                type="daterange"
                size="mini"
                unlink-panels
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                value-format="yyyy-MM-dd"
                @change="queryTop10MostUsedQuery()">
              </el-date-picker>
            </div>
            <div>
              <i class="el-icon-sort-up" :class="isSortUp('top10MostUsedQuery')?'active':''" @click="sortUp('top10MostUsedQuery')"></i>
              <i class="el-icon-sort-down" :class="isSortUp('top10MostUsedQuery')?'':'active'" @click="sortDown('top10MostUsedQuery')"></i>
            </div>
          </div>
          <bar-chart :chart-data="top10MostUsedQuery"></bar-chart>
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="12">
        <div class="chart-wrapper">
          <div class="chart-header">
            <span>慢查询</span>
            <div>
              <el-date-picker
                v-model="params.slowQueryRangeDate"
                type="daterange"
                size="mini"
                unlink-panels
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                value-format="yyyy-MM-dd"
                @change="queryTop10SlowQuery()">
              </el-date-picker>
            </div>
            <div>
              <i class="el-icon-sort-up" :class="isSortUp('top10SlowQuery')?'active':''" @click="sortUp('top10SlowQuery')"></i>
              <i class="el-icon-sort-down" :class="isSortUp('top10SlowQuery')?'':'active'" @click="sortDown('top10SlowQuery')"></i>
            </div>
          </div>
          <bar-chart :chart-data="top10SlowQuery"></bar-chart>
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="12">
        <div class="chart-wrapper">
          <div class="chart-header">
            <span>构建时间TOP10（单位：{{getChartUnit(top10SlowBuild)}}）</span>
            <div>
              <i class="el-icon-sort-up" :class="isSortUp('top10SlowBuild')?'active':''" @click="sortUp('top10SlowBuild')"></i>
              <i class="el-icon-sort-down" :class="isSortUp('top10SlowBuild')?'':'active'" @click="sortDown('top10SlowBuild')"></i>
            </div>
          </div>
          <bar-chart :chart-data="top10SlowBuild"></bar-chart>
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="12">
        <div class="chart-wrapper">
          <div class="chart-header">
            <span>数据占用TOP10（单位：{{getChartUnit(top10DataSize)}}）</span>
            <div>
              <i class="el-icon-sort-up" :class="isSortUp('top10DataSize')?'active':''" @click="sortUp('top10DataSize')"></i>
              <i class="el-icon-sort-down" :class="isSortUp('top10DataSize')?'':'active'" @click="sortDown('top10DataSize')"></i>
            </div>
          </div>
          <bar-chart :chart-data="top10DataSize"></bar-chart>
        </div>
      </el-col>
    </el-row>

    <el-tooltip placement="top" content="回到顶部">
      <back-to-top></back-to-top>
    </el-tooltip>
  </div>
</template>

<script>
import cubeApi from '@/api/kylin/cube'
import BackToTop from '@/components/BackToTop'
import ProjectSelect from '../components/ProjectSelect'
import StatisticsPanel from './components/StatisticsPanel'
import BarChart from './components/BarChart'
import AnnularChart from './components/AnnularChart'
import kylinUtil from '@/utils/kylinUtil.js'
// import BarChart2 from './components/BarChartOld'

export default {
  name: 'cube',
  components: {
    BackToTop,
    ProjectSelect,
    StatisticsPanel,
    BarChart,
    AnnularChart
  },
  data() {
    return {
      params: {
        projectId: '',
        mostUsedQueryRangeDate: [kylinUtil.getDefaultStartDateStr(), kylinUtil.getDefaultEndDateStr()],
        slowQueryRangeDate: [kylinUtil.getDefaultStartDateStr(), kylinUtil.getDefaultEndDateStr()]
      },
      sort: {
        top10LowestUsageColumn: 'down',
        top10SwellRatio: 'down',
        top10MostUsedQuery: 'down',
        top10SlowQuery: 'down',
        top10SlowBuild: 'down',
        top10DataSize: 'down'
      },
      cubeType: 'myCube',
      swellRangeStatistics: { allCube: null, myCube: null },
      statistics: {},
      top10LowestUsageColumn: null,
      top10SwellRatio: null,
      top10MostUsedQuery: null,
      top10SlowQuery: null,
      top10SlowBuild: null,
      top10DataSize: null
    }
  },
  methods: {
    query() {
      var _this = this
      cubeApi.swellRangeStatistics(this.params.projectId).then(resp => { _this.swellRangeStatistics = resp.data })
      cubeApi.statistics(this.params.projectId).then(resp => { _this.statistics = resp.data })
      cubeApi.top10LowestUsageColumn(this.params.projectId).then(resp => { _this.top10LowestUsageColumn = resp.data })
      cubeApi.top10SwellRatio(this.params.projectId).then(resp => { _this.top10SwellRatio = resp.data })
      this.queryTop10MostUsedQuery()
      this.queryTop10SlowQuery()
      cubeApi.top10SlowBuild(this.params.projectId).then(resp => { _this.top10SlowBuild = resp.data })
      cubeApi.top10DataSize(this.params.projectId).then(resp => { _this.top10DataSize = resp.data })
    },
    queryTop10MostUsedQuery() {
      var _this = this
      cubeApi.top10MostUsedQuery(this.params.projectId, this.params.mostUsedQueryRangeDate[0], this.params.mostUsedQueryRangeDate[1]).then(resp => { _this.top10MostUsedQuery = resp.data })
    },
    queryTop10SlowQuery() {
      var _this = this
      cubeApi.top10SlowQuery(this.params.projectId, this.params.slowQueryRangeDate[0], this.params.slowQueryRangeDate[1]).then(resp => { _this.top10SlowQuery = resp.data })
    },
    getChartUnit(chartData) {
      return ((chartData || {}).valueBeans || [{ unit: '' }])[0].unit
    },
    isSortUp(name) {
      return this.sort[name] === 'up'
    },
    sortUp(name) {
      this.sort[name] = 'up'
      this[name].valueBeans.forEach(item => item.data.sort((a, b) => a - b))
    },
    sortDown(name) {
      this.sort[name] = 'down'
      this[name].valueBeans.forEach(item => item.data.sort((a, b) => b - a))
    }
  },
  created: function() {
    this.query()
  }
}
</script>
<style type="text/css" >
  .cube-container .el-range-editor--mini .el-range-separator {
      width: auto;
  }
  .cube-container .el-range-editor--mini .el-range__close-icon {
      display: none;
  }
  .cube-container .el-date-editor .el-range-input {
      width: 50%;
  }
</style>

<style rel="stylesheet/scss" lang="scss" scoped>
  .cube-container {
    padding: 32px;
    background-color: rgb(240, 242, 245);
    .chart-wrapper {
      background: #fff;
      padding: 16px 16px;
      margin-bottom: 32px;
      border-radius: 8px;
      .chart-header{
        margin-bottom: 15px;
        line-height: 28px;
        display: flex;
        justify-content: space-between;
        i{
          margin-left:5px;
          margin-right:5px;
          cursor: pointer;

        }
        .active{
          color:#409EFF;
        }
        .el-date-editor--daterange {
          width: 230px;
          
        }

      }
    }
  }
  
</style>
